import React, { PureComponent } from 'react';
import { Card, Col, Timeline ,Empty} from 'antd';
import moment from 'moment';

class HdlRemark extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      flag: false,
      hdlRemark: [],
      dataArr: [],
    };
  }

  static getDerivedStateFromProps(nextProps) {
    if (!nextProps.hdlRemark) return null;
    if ('hdlRemark' in nextProps) {
      return {
        hdlRemark: nextProps.hdlRemark,
        dataArr: JSON.parse(JSON.stringify(nextProps.hdlRemark)).splice(0, 5),
      };
    }
    return null;
  }

  loadingMore = flag => {
    this.setState({
      flag: !flag,
    });
  };

  render() {
    const { flag, hdlRemark, dataArr } = this.state;
    const { isTitle = true } = this.props;
    return (
      <div>
        <Card
          title={
            isTitle ? (
              <span style={{ fontWeight: 'bolder' }} id="hdlRemark">
                办理备注
              </span>
            ) : null
          }
          bordered={false}
        >
          {hdlRemark.length ? (
            <Col>
              <Timeline>
                {(flag ? hdlRemark : dataArr).map(item => (
                  <Timeline.Item>
                    <p>
                      <span style={{ marginRight: 18 }}>
                        {item.operTime ? moment(item.operTime).format('YYYY-MM-DD HH:mm') : '--'}
                      </span>
                      <span>{item.operName}</span>
                    </p>
                    <p style={{width:'460px'}}>{item.content}</p>
                  </Timeline.Item>
                ))}
              </Timeline>
              {hdlRemark.length > 5 && (
                <p
                  style={{
                    width: 132,
                    height: 28,
                    textAlign: 'center',
                    border: '1px solid #ccc',
                    margin: '10px auto 0',
                    lineHeight: '26px',
                    cursor: 'pointer',
                    borderRadius: '4px',
                  }}
                  onClick={() => this.loadingMore(flag)}
                >
                  <span>{flag ? '收起' : '加载更多'}</span>
                </p>
              )}
            </Col>
          ) : (
            <Empty/>
          )}
        </Card>
      </div>
    );
  }
}

export default HdlRemark;
